<template>
    <div class="content">
        <el-dialog :visible.sync="bindCard.dialogFormVisible" title="绑定卡片" size="tiny" :before-close="handleClose">
            <div v-loading = "upLoading">
                <el-form ref="ruleForm" :model="ruleForm" label-width="90px" :rules="rules">
                    <el-row :gutter="41">
                        <el-col>
                            <el-form-item label="卡号" prop="cardNum">
                                <el-popover placement="top-start" trigger="focus" content="请输入卡号">
                                    <el-input slot="reference" :maxlength="10" v-model="ruleForm.cardNum" placeholder="请输入卡号"></el-input>
                                </el-popover>
                                <div class="tip">若卡面卡号以 0 开头，输入卡号时，去除前面所有的0再输入；例如：卡面卡号为【0053228075】，应输入【53228075】。</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="41">
                        <el-col :span="23">
                            <el-form-item label="卡片类型" prop="sCardType">
                                <el-radio-group v-model="ruleForm.sCardType">
                                    <el-radio label="0">IC卡</el-radio>
                                    <el-radio label="1" disabled>ID卡</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <footer>
                    <el-button @click="cancel">取消</el-button>
                    <el-button @click="add('ruleForm')" type="primary">确认</el-button>
                </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { insertAdminCard } from 'api/cardManagement';
import { mapState, mapActions } from 'vuex';
import { mapGetters } from 'vuex';
export default {
    name: 'addClassSchool',
    components: { },
    props: {
        bindCard: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            upLoading: false,
            gradeList: [],
            classList: [],
            schoolList: [],
            nameList: [],
            sUserNamelist: [],
            relationList: [
                {
                    pId: '',
                    sName: '全部'
                },
                {
                    pId: '1',
                    sName: '教师'
                }
                // {
                //     pId: '2',
                //     sName: '管理员'
                // },
            ],
            autoFill: false,
            ruleForm: {
                cardNum: '',
                sCardType: ''
            },
            loading: false,
            
            // 是否培训和普通学校  1 0
            schoolType: '0',
            rules: {
                cardNum: [
                    { required: true, message: '请输入卡号', trigger: 'blur' },
                    // { pattern: /^\d{0,20}$/, message: '请输入正确的卡号', trigger: 'change' }
                    { pattern: /^[1-9]\d{0,20}$/, message: '请输入正确的卡号', trigger: 'change' }
                ],
                sCardType: [
                    { required: true, message: '请选择卡片类型', trigger: 'change' }
                ]
            }
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolName'
        ])
    },
    created() {
    },
    methods: {

        handleClose() {
            this.$refs.ruleForm.resetFields();
            this.ruleForm.sCardType = '';
            this.bindCard.dialogFormVisible = false;
        },

        add(ruleForm) {
            this.$refs[ruleForm].validate(valid => {
                if (!valid) {
                    return false;
                } else {
                    this.upLoading = true;

                    if (this.ruleForm.cardNum === '' || this.ruleForm.sCardType === '') {
                        this.$message('请填写完整的信息');
                        return;
                    }
                    this.ruleForm.cardNum = this.ruleForm.cardNum.replace(/\b(0+)/gi, '');
                    insertAdminCard(
                        this.ruleForm.cardNum,
                        this.schoolId,
                        this.ruleForm.sCardType,
                        '1',
                        this.schoolName,
                        '2'
                    )
                    .then(data => {
                        this.upLoading = false;
                        // 给父组件传值
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        this.cancel();
                        this.$emit('bindCardState', true);
                    })
                    .catch(Error => {
                        this.upLoading = false;
                        // this.$message(Error);
                    });
                }
            });
        },

        cancel() {
            this.$refs.ruleForm.resetFields();
            this.ruleForm.sCardType = '';
            this.bindCard.dialogFormVisible = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.title {
  display: block;
  text-align: left;
  margin-left: 20px;
  font-size: 14px;
  margin-bottom: 18px;
  color: #333;
  position: relative;
  &::after {
    position: absolute;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: -15px;
    top: 10px;
    content: "";
  }
}
.tip{
  padding: 5px 0;
  color: #ccc;
  line-height: 18px;
}
footer {
  text-align: center;
}
</style>
